import React, { Component } from 'react'
import { inject, observer } from "mobx-react";



@inject('todo')
@observer

class Header extends Component {
  addTodos = (env) => {
    const {addLists} = this.props.todo
    // 判断是否按下enter键
    if (env.keyCode === 13) {
      // 获取文本框的内容
      const taskName = env.target.value
      // console.log(taskName)
      // 判断用户是否输入了内容
      if (taskName.trim().length === 0){
        alert('请输入内容')
        return
      }
      addLists(taskName)
      // 清空文本框的内容
      env.target.value = ''
    }
  }
  render() {
    // console.log(this.props)
    const {todos} = this.props.todo
    return (
      <header className="header">
        {/* <div>{JSON.stringify(todos)}</div> */}
				<h1>todos</h1>
				<input onKeyUp={this.addTodos} className="new-todo" placeholder="还有什么任务没有完成?" />
			</header>
    )
  }
}

export default Header
